*{
	margin: 0px;
	padding: 0px;
}
#box{
	width: 189px;
	height: 189px;
	margin: 200px auto;
	/*井深*/
	perspective: 1000px;
}
#in{
	width: 189px;
	height: 189px;
	transform-style: preserve-3d;
	transform-origin: 94.5px 94.5px -94.5px;
	transition:1s;
	animation: run 10s infinite;
	position: relative;
}
img{
	width: 189px;
	height: 189px;
	position: absolute;
	left: 0px;
	top: 0px;
	backface-visibility: hidden;
}
img:nth-child(3){
	transform: translateZ(-189px) rotateY(180deg);
}
img:nth-child(1){
	left: -189px;
	transform: rotateY(-90deg);
	transform-origin: right;
}
img:nth-child(2){
	left: 189px;
	transform: rotateY(90deg);
	transform-origin: left;
}
img:nth-child(5){
	width: 189px;
	height: 189px;
	top:-189px;
	transform: rotateX(90deg);
	transform-origin: bottom;
}
img:nth-child(6){
	width: 189px;
	height: 189px;
	top: 200px;
	transform: rotateX(-90deg);
	transform-origin: top;
	
}
@keyframes run{
	0%{
		transform: rotateY(0deg);
	}
	12.5%{
		transform: rotateY(90deg);
	}
	15.5%{
		transform: rotateY(90deg);
	}
	25%{
		transform: rotateY(180deg);
	}
	28%{
		transform: rotateY(180deg);
	}
	37.5%{
		transform: rotateY(270deg);
	}
	40.5%{
		transform: rotateY(270deg);
	}
	50%{
		transform: rotateY(360deg);
	}
	53%{
		transform: rotateY(360deg);
	}
	62.5%{
		transform: rotateX(-90deg);
	}
	65.5%{
		transform: rotateX(-90deg);
	}
	75%{
		transform: rotateX(-180deg);
	}
	78%{
		transform: rotateX(-180deg);
	}
	87.5%{
		transform: rotateX(-270deg);
	}
	90.5%{
		transform: rotateX(-270deg);
	}
	100%{
		transform: rotateX(-360deg);
}